<script setup>

import axios from 'axios';
import { ref, onMounted } from 'vue';

const departments = ref([]);

async function getList() {
    try {
        const response = await axios({
            method: 'get',
            url: '/api/depts'  // 使用代理路径
        });       if (response.data.code === 1) {
            console.log('获取部门列表成功:', response.data);
        } else {
            console.error('获取部门列表失败:', response.data.message);
            return;
        }
        departments.value = response.data.data;
    } catch (error) {
        console.error('获取失败:', error);
    }
}


async function addDepartment() {
  const res=   await axios({
        method: 'post',
        url: '/api/depts',
        data: {
            name: '猛男俱乐部' + Math.floor(Math.random() * 1000) // 随机生成部门名称
        }
    }).then(response => {
        if (response.data.code === 1) {
            console.log('添加部门成功:', response.data);
        } else {
            console.error('添加部门失败:', response.data.message);
        }
        getList(); // 重新获取列表
    }).catch(error => {
        console.error('添加部门失败:', error);
    })

}

async function updateDepartment(id) {
    const res = await axios({
        method: 'put',
        url: `/api/depts`,
        data: {
            id:17,
            name: '李宗瑞猛男' + Math.floor(Math.random() * 1000) // 随机生成新的部门名称
        }
    }).then(response => {
        if (response.data.code === 1) {
            console.log('更新部门成功:', response.data);
        } else {
            console.error('更新部门失败:', response.data.message);
        }
        getList(); // 重新获取列表
    }).catch(error => {
        console.error('更新部门失败:', error);
    })

}
// 组件挂载时获取数据
// onMounted(() => {
//     getList();
// });


</script>

<template>
  <div class="department-container">
        <h2>部门列表</h2>
        <button @click="getList">部门列表</button>

        <h2>添加部门</h2>
        <button @click="addDepartment">添加部门</button>

        <h2>修改部门</h2>
        <button @click="updateDepartment">修改部门</button>

        <div class="department-list">
            <div v-for="dept in departments" :key="dept.id" class="department-item">
                <span class="dept-name">{{ dept.name }}</span>
                <span class="dept-time">创建时间: {{ new Date(dept.createTime).toLocaleString() }}</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.department-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

button {
    margin: 20px 0;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.department-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.department-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dept-name {
    font-weight: bold;
}

.dept-time {
    color: #666;
    font-size: 0.9em;
}
</style>